<template>
	<div class="businessSchool">
		<img class="bs_banner" src="../../assets/images/bsbanner.png" alt="">

		<div class="bs_content">

			<div class="bsc_menu">
				<div @click="$router.push('/news_type?id=1')">
					<img src="../../assets/images/bs1.png" alt="">
					<p>C端推广方案</p>
				</div>
				<div @click="$router.push('/news_type?id=2')">
					<img src="../../assets/images/bs2.png" alt="">
					<p>B端推广方案</p>
				</div>
				<div @click="$router.push('/news_type?id=3')">
					<img src="../../assets/images/bs3.png" alt="">
					<p>5G项目讲解</p>
				</div>
				<div @click="$router.push('/news_type?id=4')">
					<img src="../../assets/images/bs4.png" alt="">
					<p>公司介绍</p>
				</div>
			</div>

			<div class="bsc_item" v-if="bsList">
				<div class="bi_title">
					<div style="width: 0.06rem;height: .3rem;border-radius: .05rem;background-color: #FF7200;"></div>
					<p>精选视频</p>
				</div>

				<div @click="$router.push('/news_info?id=' + item.id)" v-if="bsList.sp.length > 0" class="bi_news" v-for="item,index in bsList.sp" :key="index">
					<div class="bin_left">
						<!-- <img src="../../assets/images/video_test.png" alt=""> -->
						<img :src="item.image_input" alt="">
						<img id="play_video" src="../../assets/images/play.png" alt="">
					</div>

					<div class="bin_right">
						<p>{{item.synopsis}}</p>

						<div>
							<span>【{{item.title}}】</span>
							<span>{{item.shijian}}</span>
						</div>
					</div>
				</div>
				
				<img v-if="bsList.sp.length <= 0" class="zanwu" src="../../assets/images/noNews.png" alt="">
			</div>

			<div class="bsc_item" v-if="bsList">
				<div class="bi_title">
					<div style="width: 0.06rem;height: .3rem;border-radius: .05rem;background-color: #FF7200;"></div>
					<p>精选文章</p>
				</div>

				<div @click="$router.push('/news_info?id=' + item.id)" v-if="bsList.wz.length > 0" class="bi_news" v-for="item,index in bsList.wz" :key="index">
					<div class="bin_left">
						<!-- <img src="../../assets/images/video_test.png" alt=""> -->
						<img :src="item.image_input" alt="">
					</div>

					<div class="bin_right">
						<p>{{item.synopsis}}</p>

						<div>
							<span>【{{item.title}}】</span>
							<span>{{item.shijian}}</span>
						</div>
					</div>
				</div>
				
				<img v-if="bsList.wz.length <= 0" class="zanwu" src="../../assets/images/noNews.png" alt="">
			</div>
			
			<!-- <van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" /> -->
			<div class="onload_div" v-if="bsList == ''">
				
				<van-loading size="24px">加载中...</van-loading>
				
			</div>
			
			<img v-if="bsList == null" class="zanwu" src="../../assets/images/noNews.png" alt="">

		</div>

	</div>
</template>

<script>
	import {
		swiper,
		swiperSlide
	} from "vue-awesome-swiper";

	import {
		Loading 
	} from 'vant'

	import Vue from 'Vue'
	Vue.use(Loading)
	
	import {
		wzindex
	} from '../../api/store.js'

	export default {
		name: "BusinessSchool",
		components: {
			swiper,
			swiperSlide
		},
		created() {
			this.wzindex()
		},
		data: function() {
			return {
				bsList:''
			}
		},
		methods: {
			wzindex() {

				wzindex().then((res) => {
					
					this.bsList = res.data
					
					console.log(res.data,'sssss')
					
				}).catch((error) => {

					this.bsList = null

				})

			}
		}

	}
</script>

<style lang="scss">
	
	.onload_div{
		width: 100%;
		margin: 1rem 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.zanwu{
		width: 70%;
		margin: auto;
		margin-top: .5rem;
		margin-bottom: .5rem;
		display: block;
	}
	
	.bsc_item {
		background-color: white;
		border-radius: .1rem;
		padding: .2rem;
		box-sizing: border-box;
		margin-bottom: .2rem;

		.bi_title {
			display: flex;
			align-items: center;
			margin-bottom: .32rem;

			p {
				margin-left: .14rem;
			}
		}

		.bi_news {
			// padding: 0 .3rem;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin-bottom: .2rem;

			.bin_left {
				position: relative;
				width: 2.66rem;

				img {
					object-fit: cover;
					width: 100%;
					height: 1.72rem;
					border-radius: .1rem;
				}

				#play_video {
					position: absolute;
					top: .65rem;
					left: 50%;
					transform: translateX(-50%);
					width: .55rem;
					height: .55rem;
				}
			}

			.bin_right {
				width: 3.1rem;
				margin-left: .27rem;
				font-size: .3rem;
				height: 1.72rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				div {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #999999;
					font-size: .24rem;
				}
				
				>p:nth-child(1){
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; //作为弹性伸缩盒子模型显示。
					-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp:2; //显示的行
				}
			}
		}
	}

	.bs_content {
		padding: 0 .25rem;
		box-sizing: border-box;
		padding-bottom: 1rem;

		.bsc_menu {
			margin: .2rem 0;
			display: grid;
			grid-template-columns: 3.5rem 3.5rem;
			grid-template-rows: 1.24rem 1.24rem;
			grid-row-gap: .11rem;
			grid-column-gap: .08rem;

			div {
				border-radius: .1rem;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: .3rem;

				img {
					width: .74rem;
					height: .74rem;
					margin-right: .27rem;
				}
				
				p{
					width: 1.8rem;
				}
			}
		}
	}

	.bs_banner {
		width: 100%;
		height: 2.76rem;
	}
</style>
